<template>
	<view class="contents" :style="'height:'+screenHeight+'px;'">
		<view class="top">
			<u-subsection :list="list" v-model="current" @change="changes" mode="button" active-color="#ffffff"
				button-color="#3B71E8" bg-color="#ffffff"></u-subsection>
		</view>
		<!-- <view class="">
			{{res}}
		</view> -->
		<view class="none" v-if="show">
			<view class="coent">
				<u-empty text="暂无体检记录" mode="list" icon-size="200"></u-empty>
			</view>
		</view>

		<view class="conentaa" v-else>
			<view class="mzlist" v-for="(item,index) in datalist" :key="index" @click="detil(item)">
				<view class="mzhz">
					<view class="mztite">
						{{item.TJTestName}}
					</view>
					<view class="mznr">
						<view class="mztiao">
							<view class="mzbtwo color1" style="">
								￥{{item.TJAmount}}
							</view>
						</view>
						<view class="mztiao">
							<view class="mzbtwo">
								<!-- <u-icon name="account" color="#2979ff" size="28"></u-icon> -->
								{{item.TJName}}
							</view>
						</view>
						<view class="mztiao" style="padding-bottom: 30rpx;">
							<view class="mzbtwo" style="color: gray;">
								<!-- <u-icon name="account" color="#2979ff" size="28"></u-icon> -->
								{{item.TJAddress}}
							</view>
						</view>
						<!-- <view class="mztiao">
							<view class="mzaone">
								项目名称:
							</view>
							<view class="mzbtwo">
							{{item.TJAmount}}
							</view>
						</view>
						<view class="mztiao">
							<view class="mzaone">
								家庭地址:
							</view>
							<view class="mzbtwo">
							{{item.TJAddress}}
							</view>
						</view> -->
					</view>
					<view class="an" style="">
						<view class="">

						</view>
						<view class="" v-if="item.TJStatus=='2'">
							<u-button type="primary" size="mini" :plain="true"
								@click="openLink(item.TJRegNo)">查看报告</u-button>
						</view>
						<view class="" v-if="item.TJStatus=='0'">
							<!-- <u-button type="primary" size="mini" :plain="true"  @click="canvas(item.TJRegNo)">订单二维码</u-button> -->
							<u-button type="default" size="mini" :plain="true"
								@click="DelOrder(item.TJRegisterId)">取消预约</u-button>&ensp;
							<u-button type="error" size="mini" :plain="true" @click="pays(item.TJRegNo)">去支付</u-button>
						</view>
						<view class="" v-if="item.TJStatus=='1'">
							<u-button type="default" size="mini" :plain="true"
								@click="TJRefund(item.TJRegNo)">取消预约并退款</u-button>&ensp;
							<u-button type="primary" size="mini" :plain="true"
								@click="canvas(item.TJRegNo)">订单二维码</u-button>&ensp;
							<u-button type="success" size="mini" :plain="true">待参与</u-button>
						</view>
						<view class="" v-if="item.TJStatus=='10'">
							<u-button type="default" size="mini" :plain="true">已退款</u-button>&ensp;
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showcode" mode="center">
			<view class="code">
				<uv-qrcode ref="qrcode" size="400rpx" :value="TJRegNo"></uv-qrcode>
				<view class="codetetx">
					<span>订单号：{{TJRegNo}}</span>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="deleteshow" confirm-color='#3B71E8' content="取消预约后不可恢复,是否确认?" show-cancel-button="true"
			@confirm="confirm" @cancel="deleteshow==false" mask-close-able="true"></u-modal>
		<u-modal v-model="TJRefundshow" confirm-color='#3B71E8' content="取消预约后将自动退款,是否确认?" show-cancel-button="true"
			@confirm="TJRefundconfirm" @cancel="deleteshow==false" mask-close-able="true"></u-modal>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';

	export default {
		data() {
			return {
				showcode: false,
				deleteshow: false,
				TJRefundshow: false,
				list: [{
						Status: '',
						name: '全部'
					},
					{
						Status: '0',
						name: '待支付'
					},
					{
						Status: '1',
						name: '待参与'
					},
					{
						Status: '2',
						name: '已完成'
					}
				],
				TJRegisterId: '',
				TJRegNo: '',
				current: 1,
				Status: '0',
				show: false,
				jianyival: '',
				screenHeight: getApp().globalData.screenHeight - 44,
				datalist: [],
				res: ''
			}
		},
		onLoad() {
			this.GetOrderList()

		},
		onPullDownRefresh() {
			this.GetOrderList()
			uni.stopPullDownRefresh();

		},
		methods: {
			couponQrCode() {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.TJRegNo;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				this.showcode = true
			},
			canvas(TJRegNo) {
				this.TJRegNo = TJRegNo
				this.couponQrCode()
			},
			TJRefundconfirm() {
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				this.$request("RegTJRecord", "TJRefund", {
					OrderNo: this.TJRegNo,
					RefundReson: ''
				}).then(res => {
					// this.res=res
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.GetOrderList()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.GetOrderList()
					}
				}).catch(err => {
					this.show = true
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});
			},
			TJRefund(TJRegNo) {
				this.TJRegNo = TJRegNo
				this.TJRefundshow = true
			},
			pays(TJRegNo) {
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				let thenthis = this
				this.$request("RegTJRecord", "GetTJPay", {
					OrderNo: TJRegNo
				}).then(resa => {
					// console.log("支付", resa)
					// this.res=resa
					if (resa.code == 1) {
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": resa.data.appId, //公众号ID，由商户传入     
								"timeStamp": resa.data.timeStamp, //时间戳，自1970年以来的秒数     
								"nonceStr": resa.data.nonceStr, //随机串     
								"package": resa.data.package,
								"signType": resa.data.signType, //微信签名方式：     
								"paySign": resa.data.paySign //微信签名 
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									uni.showToast({
										title: "成功支付",
										icon: "none",
										duration: 2000,
									});
									thenthis.current=2
									thenthis.Status='1'
									thenthis.GetOrderList()
									uni.navigateTo({
										url: `/pages/zhuyaun/tijian/tijiandetilxx?TJRegNo=${TJRegNo}`
									})
									
								} else {
									uni.showToast({
										title: "支付未成功",
										icon: "none",
										duration: 2000,
									});
								}
							});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: resa.msg,
							icon: 'none',
							duration: 2000
						});
						this.GetOrderList()
					}
				}).catch(err => {
					this.show = true
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});
				// uni.navigateTo({
				// 	url: `/pages/Yibao/index/index?biz_ord_no=${TJRegNo}`,
				// 	fail: (error) => {
				// 		console.log(error);
				// 	}
				// })
			},
			DelOrder(TJRegisterId) {
				this.TJRegisterId = TJRegisterId
				this.deleteshow = true
			},
			confirm() {
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				this.$request("RegTJRecord", "DelOrder", {
					TJRegisterId: this.TJRegisterId
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.GetOrderList()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.GetOrderList()
					}
				}).catch(err => {
					this.show = true
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});
			},
			openLink(TJRegNo) {
				let url =
					'http://123.178.150.114:9002/dcms/reslib/util/print/printView.html?printcode=CHILD_JN_ERTJCYZMHYD&orgid=307&showview=true&pdf=1&checknum=' +
					TJRegNo
				// window.open(url, '_blank');
				window.location.href = url
			},
			changes(index) {
				console.log(index)
				this.Status = this.list[index].Status
				this.current = index
				// console.log("this.list[index].Status", this.Status)
				this.GetOrderList()
			},
			detil(item) {
				if(item.TJStatus!='1'){
					return
				}
				uni.navigateTo({
					url: `/pages/zhuyaun/tijian/tijiandetilxx?TJRegNo=${item.TJRegNo}`
				})
			},
			GetOrderList() {
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				this.$request("RegTJRecord", "GetOrderList", {
					TJStatus: this.Status
				}).then(res => {
					console.log("体检记录", res)
					if (res.code == 1) {
						this.datalist = res.data
						this.show = false
						uni.hideLoading();
					} else {
						this.show = true
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {
					this.show = true
					uni.hideLoading();
					console.log("err", err)
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});
			}
		}
	}
</script>

<style>
	@import './tijian.css';
</style>